<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高阶函数</title>
    <!-- 
        高阶函数是对其他函数进行操作的函数，
        它接收函数作为参数或将函数作为返回值输出
        此时 fn 就是一个高阶函数

        函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。 
        最典型的就是作为回调函数。
     -->
     <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
     </style>
</head>
<body>
    <button>点击</button>
    <div></div>
    
</body>
<script>
    // function fn(callback) {
    //     callback&&callback();
    // }
    // fn(function(){alert('hi')})

    // function fn(){
    //   return function() {}
    // }
    // fn();
    function fn(a,b,callback) {
        console.log(a+b);
        callback&&callback()
    }
    fn(1,2,function(){
        console.log('我是最后调用的');
    })

    function animate(obj,target,callback) {
        clearInterval(obj.timer)
       obj.timer = setInterval(function(){
            var step = (target - obj.offsetLeft) / 10
            var step = step>0?Math.ceil(step):Math.floor(step)
            if(obj.offsetLeft == target){
                clearInterval(obj.timer)
                if(callback){
                    callback()
                }
            }
            obj.style.left = obj.offsetLeft + step +'px'
        },30)
    }
    var div = document.querySelector('div')
    var btn = document.querySelector('button')
    btn.onclick = function(){
        animate(div,500,function(){
            div.style.backgroundColor = 'skyblue'
        })
    }

</script>
</html>